<template>
  <div>
    <mt-search   
        autofocus   
        v-model="name"   
        :result="filterResult"> 
        <div :style="{marginTop: size40, fontSize: size20, marginLeft: size20, marginBottom: size20}">患者</div>
        <mt-cell   v-for="item in sufferList">
          <div slot="icon" :style="{height: size83}" >
            <div style="float:left;" :style="{marginTop: size15}">
              <img :src="head"  :style="{width: size62, height: size62}" class="search-head-Image" ></img>
              <div class="search-ss" style="font-size:10px;">{{item.sex}}</div>
            </div>
            <div style="font-size:10px;float:left;" :style="{marginTop: size20,marginLeft: size20}">
                <div :style="{fontSize: size30}" style="font-weight: bold;">{{item.name}}</div>
                <div :style="{marginTop: size15}">{{item.mobile}}</div>
            </div>
          </div>
        </mt-cell>
    </mt-search>  
  </div>
</template>

<script>
import { Search } from 'mint-ui'

export default {
  components: {
    Search: Search.name
  },
  data () {
    return {
      head: '../../../static/head.jpg',
      search: '../../../static/search.png',
      name: '',
      sufferList: [],
      DemoList: [
          { name: 'Apple', sex: '男', mobile: '13678765456' },
          { name: 'Banana', sex: '男', mobile: '13678765456' },
          { name: 'Orange', sex: '女', mobile: '13678765456' },
          { name: 'Durian', sex: '女', mobile: '13678765456' },
          { name: 'Lemon', sex: '男', mobile: '13678765456' },
          { name: 'Peach', sex: '男', mobile: '13678765456' },
          { name: 'Berry', sex: '男', mobile: '13678765456' },
          { name: 'Cherry', sex: '女', mobile: '13678765456' },
          { name: 'Berry', sex: '女', mobile: '13678765456' },
          { name: 'Core', sex: '男', mobile: '13678765456' }
      ]
    }
  },
  mounted () {
    this.getIndex()
  },
  computed: {
    filterResult () {
      this.sufferList = []
      var nameArr = []
      var returnArr = []
      for (var i in this.DemoList) {
        nameArr.push(this.DemoList[i].name)
      }
      nameArr = nameArr.filter(value => new RegExp(this.name, 'i').test(value))
      for (var j in nameArr) {
        for (var k in this.DemoList) {
          if (this.DemoList[k].name === nameArr[j]) {
            returnArr.push(this.DemoList[k])
          }
        }
      }
      this.sufferList = returnArr
    },
    size15 () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    size20 () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    size30 () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    size40 () {
      return this.clientWidth * 40 / 750 + 'px'
    },
    size62 () {
      return this.clientWidth * 62.5 / 750 + 'px'
    },
    size83 () {
      return this.clientWidth * 83.3 / 750 + 'px'
    }
  }
}
</script>

<style>
.search-head-Image {
    border-radius:50%;
  }
.search-ss{
    width:30px;
    text-align: center;
    border: solid 1px #FF9900;
    -webkit-border-radius: 30%;
}
</style>
